// 头部 子

import { DatePicker, Space, Input, Radio,Button } from 'antd';
import { useState } from 'react';

const Search3 = (props) => {

  const [value, setValue] = useState({
    time:'',
    name:'',
    priority:1
  });
  


  // 时间
  const onChange = (date, dateString) => {
    console.log(date, dateString);
    setValue({
      ...value,time:dateString
    })
  };


  // 优先级
  const onChange2 = (e) => {
    console.log('radio-checked', e.target.value);
    setValue({
      ...value,priority:e.target.value
    });
  };


  // 标题
  const biaoname =(e)=>{
    setValue({
      ...value,name:e.target.value
    })
  }

  // 添加
  let add =()=>{
    let {name,priority,time} = value
    props.todolist3({time,name,priority})
  }


  return (
    <>
      <div className='swarch'>
        {/* 日期 */}
        <div className='time'>
          <span style={{ color: '#fff' }}>日期：</span>
          <Space direction="vertical" className='time2'>
            <DatePicker onChange={onChange} />
          </ Space>
        </div>
        {/* 标题 */}
        <div className='input'>
          <span style={{ color: '#fff' }}>标题：</span>
          <Input placeholder="请输入标题" className='inp2' value={value.name} onChange={biaoname} />
        </div>
      </div>

      {/* 优先级 */}
      <div className='priority'>
        <span style={{ color: '#fff' }}>优先级：</span>
        <Radio.Group onChange={onChange2} value={value.priority}>
          <Radio value={1}>1</Radio>
          <Radio value={2}>2</Radio>
          <Radio value={3}>3</Radio>
          <Radio value={4}>4</Radio>
        </Radio.Group>
      </div>

      <div>
        <Button className='buttonas' type="primary" onClick={add}>添加</Button>
      </div>

    </>
  )
}

export default Search3;